<template>
  <div class="container">
    <div class="header" :class="{active: isActive}">
      <Header></Header>
    </div>
    <div class="body">
      <p class="text">
        ✍️行有余力 , 写点笔记!
      </p>
      <p style=" font-size: 16px;
      opacity: .8;
      text-align: right;
      color: white;
      margin-top: 10px;">手执烟火以谋生,心怀诗意至远方</p>
    </div>
    <div class="body-head">
      <div class="body-head-left">
        <el-card shadow="always">
          <el-skeleton animated :loading="loading1">
            <template #template>
              <el-skeleton :rows="3" style="height: 30%"></el-skeleton>
            </template>
            <template #default>
              <div style="display: flex">
                <SvgIcon name="recommend" width="20px" height="20px"></SvgIcon>
                <span style="margin-left: 10px">精选</span>
              </div>
              <div class="llist">
                <div class="item" v-for="(item,index) in HotPost" :key="index" @click="goDetail(item.id)">
                  <span class="sort" :style="bgc(index)">{{ index + 1 }}</span>
                  <span class="text">{{ item.title }}</span>
                </div>
              </div>
            </template>
          </el-skeleton>
          <el-card>
            <el-skeleton animated :loading="loading2">
              <template #template>
                <div style="display: flex;justify-content: space-between;">
                  <el-skeleton-item variant="image" style="width: 220px; height: 150px"/>
                  <div
                      style="width: 60%;display: flex;flex-direction: column;justify-content: space-between;padding: 20px">
                    <el-skeleton-item variant="h3" style="height: 20px; width: 50%"></el-skeleton-item>
                    <el-skeleton-item variant="p"></el-skeleton-item>
                  </div>
                </div>
                <el-divider></el-divider>
                <div style="display: flex;justify-content: space-between">
                  <el-skeleton-item variant="image" style="width: 220px; height: 150px"/>
                  <div
                      style="width: 60%;display: flex;flex-direction: column;justify-content: space-between;padding: 20px">
                    <el-skeleton-item variant="h3" style="height: 20px; width: 50%"></el-skeleton-item>
                    <el-skeleton-item variant="p"></el-skeleton-item>
                  </div>
                </div>
                <el-divider></el-divider>
              </template>
              <template #default>
                <div class="card-list" v-for="(item,key) in postData" @click="goDetail(item.id)" :key="key">
                  <div>
                    <img style="border-radius: 10px"
                         :src=item.imgUrl
                         alt="" width="220px" height="150px">
                  </div>
                  <div class="item_right">
                    <div>
                      <p class="title">{{ item.title }}</p>
                    </div>
                    <div class="item_bottom">
                      <div class="tag">
                        <span v-for="(item,index) in item.tags" :key="index"> {{ item }}</span>
                      </div>
                      <div>
                        <span>浏览：{{ item.likes }}  </span>
                        &nbsp;
                        <span> {{ item.updated_at.split("T")[0] }}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </template>
            </el-skeleton>
          </el-card>
          <el-pagination
              style="margin-top: 20px;"
              v-model:current-page="currentPage"
              v-model:page-size="pageSize"
              :page-sizes="[2, 3, 6]"
              :small="small"
              :disabled="disabled"
              :background="background"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
          />
        </el-card>
      </div>
      <div class="body-head-right">
        <el-card shadow="always">
          <el-skeleton animated :loading="loading3">
            <template #template>
              <el-skeleton :rows="7"></el-skeleton>
            </template>
            <template #default>

              <div style="display: flex">
                <SvgIcon name="fenlei" width="20px" height="20px"></SvgIcon>
                <span style="margin-left: 10px">热榜</span>
              </div>
              <div class="rlist">
                <div class="item" v-for="(item,index) in NewPost" :key="index">
                  <p class="list"> # <span>{{ item.title }}</span> 🔥</p>
                </div>
              </div>

            </template>
          </el-skeleton>
        </el-card>
      </div>
    </div>
    <el-dialog width="80%" destroy-on-close v-model="dialogVisible">
      <!--      <VMdPreview :id="postId"></VMdPreview>-->
      <!--      <MarkdownParser :id="postId"></MarkdownParser>-->
      <MarkdownParser2 :id="postId"></MarkdownParser2>
    </el-dialog>
    <Bottom></Bottom>
  </div>


</template>
<script setup lang="ts">
import Header from "@/layout/index.vue"
import SvgIcon from "@/components/SvgIcon/SvgIcon.vue";
import {getHotPosts, getNewPosts, getPosts} from "@/api/Note";
import {onBeforeMount, ref} from "vue";
import Bottom from "@/components/Bottom/index.vue"
import {onUnmounted} from "vue"
import MarkdownParser2 from '@/components/MarkdownRenderer/index.vue'

//定义postData  ts数据类型
type data = {
  id: number,
  title: string,
  imgUrl: string,
  tags: Array<string>,
  likes: number,
  updated_at: string,
  content: string,
  created_at: string,
  liulan: number
}
type HotPost = {
  id: number,
  title: string,
}
const postData = ref<data[]>([])
const HotPost = ref<data[]>([])
const NewPost = ref<data[]>([])

const loading1 = ref(true)
const loading2 = ref(true)
const loading3 = ref(true)


const isActive = ref(false)

const currentPage = ref(1)
const pageSize = ref(2)
const small = ref(false)
const total = ref(0)
const background = ref(false)
const disabled = ref(false)
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
  currentPage.value = 1
  pageSize.value = val
  getdata()
}
const handleCurrentChange = async (val: number) => {
  console.log(`current page: ${val}`)
  currentPage.value = val
  const res = await getPosts((currentPage.value - 1) * pageSize.value, pageSize.value);
  postData.value = res.data.data
  total.value = res.data.length
  loading2.value = false
}

const dialogVisible = ref(false)
const postId = ref<any>()

onBeforeMount(async () => {
  await getdata()
  await geHotPost()
  await getNewPost()
  window.addEventListener("scroll", handleScroll)
})
const handleScroll = () => {
  const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  isActive.value = scrollTop > 733;
}
onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll);
});
const getdata = async () => {
  const res = await getPosts(currentPage.value - 1, pageSize.value);
  postData.value = res.data.data
  total.value = res.data.length
  loading2.value = false
}
const geHotPost = async () => {
  const res = await getHotPosts();
  HotPost.value = res.data
  loading1.value = false
}
const getNewPost = async () => {
  const res = await getNewPosts();
  NewPost.value = res.data
  loading3.value = false
}
const goDetail = (id: number) => {
  dialogVisible.value = true
  postId.value = id
}
const bgc = (index: number) => {
  if (index == 0) {
    return "background-color:#fe4c41;"
  } else if (index == 1) {
    return "background-color:#fd8247;"
  } else if (index == 2) {
    return "background-color:#ffc106;"
  }
}

</script>
<style scoped lang="scss">
.container {
  height: 60vh;
  position: relative;
  background: #fff;
  background-image: url("https://cdn.xuxiao888.com/back/colorhub.me_photos_yeOGl_3000x2000-mE2IL7VK.jpeg");
  background-position: 50%;
  background-size: cover;
  background-repeat: no-repeat;

  .header {
    //粘性定位
    position: fixed;
    top: 0;
    z-index: 999;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.3);
    transition: all 0.3s;

  }

  .active {
    background: rgba(255, 255, 255, 0.3);
    box-shadow: 0 1px 3px 0 rgb(0 34 77 / 10%);
    border: 1px solid rgba(255, 255, 255, 0.05);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }

  .body {
    height: 100%;
    //margin-top: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .text {
      font-size: 30px;
      font-weight: 600;
      color: rgb(255, 255, 255);
      position: relative;
      z-index: 9;
      text-align: center;
      letter-spacing: 1.2px;
    }
  }

  .body-head {
    display: flex;
    flex-direction: row;
    justify-content: center;
    //align-items: center;
    margin-top: -120px;
    position: relative;
    z-index: 9;

    .body-head-left {
      width: 50%;

      .llist {
        padding: 10px 0;

        .item {
          padding: 8px 15px;
          display: flex;
          align-items: center;
          cursor: pointer;

          .sort {
            flex: none;
            width: 20px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            background: #fe4c41;
            color: #fff;
            border-radius: 3px;
            font-size: 14px;
            margin-right: 10px;
          }

          .text {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            overflow: hidden;
          }
        }

      }

      .card-list {
        display: flex;
        margin-bottom: 15px;
        border-bottom: 1px solid #ccc;
        cursor: pointer;

        .item_right {
          width: 100%;
          margin: 15px 0px 20px 20px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .title {
            letter-spacing: 1.2px;
            font-weight: 600;
            transition: all .2s;
            padding-top: 5px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            font-size: 17px;
          }

          .item_bottom {
            display: flex;
            justify-content: space-between;
            font-size: 14px;
            color: #b2b2b2;

            .tag {


              span {
                margin-right: 10px;
                background: #f5f5f5;
                padding: 2px 4px;
                border-radius: 4px;
              }
            }
          }
        }
      }
    }

    .body-head-right {
      margin-left: 10px;
      width: 20%;

      .rlist {
        .item {
          margin-top: 10px;
          padding: 10px 10px;
          display: flex;
          align-items: center;
          cursor: pointer;

          .list {

            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            overflow: hidden;
            font-size: 17px;

          }
        }
      }
    }
  }
}

.container::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  background-color: rgba(0, 0, 0, 0.4);
}

</style>